<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<div class="full-width">

 <%--map init --%>
 <script type="text/javascript">
 		var centerPlace = null;
	 <c:if test="${not empty searchResult.targetLocation and not empty searchResult.targetLocation.name and not empty searchResult.targetLocation.latitude and not empty searchResult.targetLocation.longitude}">
	 	 centerPlace= new Object();
		centerPlace.name =  '<c:out value="${searchResult.targetLocation.name}" />';
		centerPlace.lat = ${searchResult.targetLocation.latitude};
		centerPlace.lng = ${searchResult.targetLocation.longitude};
		<c:choose>
			<c:when test="${searchParams.distance gt 0}">
				centerPlace.searchRadius = ${searchParams.distance*1609.344};//meter
			</c:when>
			<c:otherwise>
				centerPlace.searchRadius = ${20*1609.344};//meter
			</c:otherwise>
		</c:choose>
				
		
		centerPlace.infoWindowHtml ="<div class=\"module info-window-box position-rel font-14\" style=\"background-color:white;\">";
		//retrieve the html from dom
		centerPlace.infoWindowHtml += "<div class='info-label'><strong>"+centerPlace.name+"</strong></div>";
		centerPlace.infoWindowHtml +="<div class=\"close-button position-abs\" onClick=\"javascript:mapUtil.closeInfoWindow()\"><i class=\"icon-remove-sign icon-2x css-pie\"></i></div>";
		centerPlace.infoWindowHtml += "<div class=\"bubble-arrow border\"></div>";
		centerPlace.infoWindowHtml += "<div class=\"bubble-arrow\"></div>";
		centerPlace.infoWindowHtml += "</div>";				
		centerPlace.infoWindowHtml += "</div>";
		centerPlace.infoWindowPixlOffset_x = -95;
		centerPlace.infoWindowPixlOffset_y = -35;			
	</c:if>
	
	<c:if test="${not empty latLngListJson}">
		places = ${latLngListJson};
	</c:if>
	<c:if test="${not empty targetMultiPolygonJson}">
		targetCoordinates = ${targetMultiPolygonJson}
	</c:if>
	<c:if test="${not empty neighborMultiPolygonJson}">
		neighborCoordinates = ${neighborMultiPolygonJson};
	</c:if>
	
	<c:if test="${(not empty searchResult.targetLocation and not empty searchResult.targetLocation.name and not empty searchResult.targetLocation.latitude and not empty searchResult.targetLocation.longitude) or not empty searchResult.offices or not empty targetMultiPolygonJson}">
		var mapUtilConfig={
			centerPlace:centerPlace,
			onMapLoadCallback:KSR.Search.onMapLoadCallback
		}
	</c:if>
	
</script>
	<div class="search-result padding-horizontal">
		<div class="full-width search-listing font-14">
			<c:if test="${not empty searchResult.offices}">
				<div class="separate-row-single"></div>
				<span id="officeListWrapper">
				<script type="text/javascript">
					//document.write(KSR.Search.createOfficeListHtml(${officeListJson}));
				</script>
				</span>
				<c:forEach items="${searchResult.offices}" var="office" varStatus="status">
					<div class="search-item full-width" office-id="${office.id }">
						<span class="for-infowindow">
						<div class="title">
							<c:out value="${status.count }"/>.
							<a href="office.html?id=${office.id}">
							<span class="ownner"><c:out value="${office.business.businessName }" escapeXml="false"/></span>
							/
							<span class="ownner"><c:out value="${office.address.city}"/></span>
							</a>
						</div>
						<div class="margin-left margin-top-half rating font-orange font-15">
							<jsp:include page="/WEB-INF/modules/displayStarsByRating.jsp">
								<jsp:param value="${office.rating}" name="rating"/>
							</jsp:include>
							<span class="review-count margin-left-half font-dark">
								<c:out value="${office.reviewCount}"/> 
								<c:choose>
									<c:when test="${office.reviewCount gt 1}">reviews</c:when>
									<c:otherwise>review</c:otherwise>
							</c:choose>
							</span>
						</div>
						<div class="margin-left margin-top-half">
							<span class="business-name">
								<c:choose>
									<c:when test="${not empty office.specialty and fn:length(office.specialty) gt 200}">
									    <div id="partial-collapse-specialty-${office.id}" class="partialCollapse" heightInCollapse="50">
									    <strong>Specialty:</strong>
									        <c:out value="${office.specialty }" escapeXml="false"/>
									        <div class="gradient-hide-bar"></div>
									    </div>
									    <div class="full-width text-center margin-top-half">
									        <a data-toggle="partialCollapse" href="#partial-collapse-specialty-${office.id}" class="btn btn-default btn-xs margin-auto bold" textInCollapse="View More..." textInExpand="View Less...">
									         	View More...
									        </a>
									    </div>										
									</c:when>
									<c:otherwise>
									<strong>Specialty:</strong>
										<c:out value="${office.specialty }" escapeXml="false"/>
									</c:otherwise>
								</c:choose>
							</span>
						</div>				
						<c:if test="${not empty office.price}">
							<div class="margin-left">
								<label>Price:</label>
								<span class="business-name">
									<c:out value="$${office.price }/hr" escapeXml="false"/>
								</span>
							</div>												
						</c:if>								
						<address class="margin-left margin-bottom-half">
							<div class="">
								<span class="margin-right"><i class="icon-map-marker icon-large font-dark"></i></span>
								<c:out value="${office.address.addressLine1 }"/>,
								<c:if test="${not empty office.address.addressLine2}">
									<c:out value="${office.address.addressLine2}"/>,
								</c:if>
								<c:out value="${office.address.city}"/>,
								<c:out value="${office.address.state}"/>
								<c:out value="${office.address.zip}"/>
							</div>
							<div>
								<span class="">Email:</span>
								<span>
									<a href="mailto:${office.emailAddress}">
										<c:out value="${office.emailAddress}"/>
									</a>
								</span>
							</div>
							<div>
								<span class="margin-right"><i class="icon-phone icon-large"></i></span>
								<span><c:out value="${office.phoneNumber}"/></span>
							</div>
						</address>
						</span>
						<%--
						<div class="margin-left margin-top-half">
							<span class="icon  margin-right"><i class="icon-location-arrow"></i></span>
							<span class="business-name">
								<a href="#">Get Direction</a>
							</span>
						</div>						
						 --%>
						<div class="margin-left">
							<label>Owned by:</label>
							<span class="business-name">
								<a href="#">
									<c:out value="${office.business.businessName }" escapeXml="false"/>
								</a>
							</span>
						</div>
						<div class="margin-left">
							<p class="serif font-dark font-15">
								<c:choose>
									<c:when test="${not empty office.description and fn:length(office.description) gt 120}">
									    <div id="partial-collapse-description-${office.id}" class="partialCollapse" heightInCollapse="50">
									        <c:out value="${office.description}" escapeXml="false"/>
									        <div class="gradient-hide-bar"></div>
									    </div>
									    <div class="full-width text-center margin-top-half">
									        <a data-toggle="partialCollapse" href="#partial-collapse-description-${office.id}" class="btn btn-default btn-xs margin-auto bold" textInCollapse="View More..." textInExpand="View Less...">
									         	View More...
									        </a>
									    </div>										
									</c:when>
									<c:otherwise>
										<c:out value="${office.description }" escapeXml="false"/>
									</c:otherwise>
								</c:choose>							
							
							
							
							</p>
						</div>
					</div>
					<div class="separate-row-single-1px"></div>
				</c:forEach>
			</c:if>
			<c:if test="${empty searchResult.offices}">
				<div class="alert alert-warning">No search result for your search criteria!</div>
			</c:if>
		</div>
	</div>
</div>